<template>
  <el-dialog v-model="ruleVisible" title="恢复默认规则" width="80%" class="default-rule-dialog">
    <div class="dialog-content">
      <!-- 提示信息 -->
      <div class="info-section">
        <div class="info-header">
          <Icon icon="ep:info-filled" class="info-icon" />
          <span class="info-title">选择默认规则类型</span>
        </div>
        <p class="info-desc">选择合适的默认规则类型，系统将自动配置相应的意向标签规则</p>
      </div>

      <!-- 规则选择 -->
      <div class="select-section">
        <label class="select-label">
          <Icon icon="ep:setting" class="label-icon" />
          规则类型
        </label>
        <el-select v-model="formData.type" placeholder="请选择规则类型" class="rule-select">
          <el-option
            v-for="item in ruleOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="rule-option"
          >
            <div class="option-content">
              <Icon :icon="getRuleIcon(item.value)" class="option-icon" />
              <div class="option-text">
                <span class="option-label">{{ item.label }}</span>
                <span class="option-desc">{{ getRuleDesc(item.value) }}</span>
              </div>
            </div>
          </el-option>
        </el-select>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="ruleVisible = false" class="cancel-btn">
          <Icon icon="ep:close" class="btn-icon" />
          取消
        </el-button>
        <el-button
          type="primary"
          @click="submit"
          :disabled="loading"
          :loading="loading"
          class="submit-btn"
        >
          <Icon icon="ep:check" class="btn-icon" />
          {{ loading ? '恢复中...' : '确定' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { recoverDefault } from '@/api/call/ivr/index'

defineOptions({ name: 'DefaultRule' })

const ruleVisible = ref(false)
const loading = ref(false)

const formData = reactive({
  type: '',
  flowId: ''
})

const ruleOption = [
  {
    label: '默认规则一(严格)',
    value: 1
  },
  {
    label: '默认规则二(宽松)',
    value: 2
  }
]

const emit = defineEmits(['success'])

// 获取规则图标
const getRuleIcon = (value) => {
  return value === 1 ? 'ep:lock' : 'ep:unlock'
}

// 获取规则描述
const getRuleDesc = (value) => {
  return value === 1 ? '更严格的匹配条件' : '更宽松的匹配条件'
}

const open = (id) => {
  formData.type = ''
  formData.flowId = id
  ruleVisible.value = true
}

const submit = async () => {
  try {
    loading.value = true
    if (formData.type == '') {
      ElMessage.warning('请选择规则')
      return
    }
    await recoverDefault(formData)
    ElMessage.success('操作成功')
    emit('success')
    ruleVisible.value = false
  } finally {
    loading.value = false
  }
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.default-rule-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
    color: white;
    padding: 20px 24px;
  }

  :deep(.el-dialog__title) {
    color: white;
    font-weight: 600;
    font-size: 18px;
  }

  :deep(.el-dialog__headerbtn .el-dialog__close) {
    color: white;
    font-size: 18px;
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }

  :deep(.el-dialog__footer) {
    padding: 0;
  }
}

.dialog-content {
  padding: 24px;
  background: #f8fafc;
}

.info-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.info-icon {
  color: #0052cc;
  font-size: 18px;
}

.info-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.info-desc {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.select-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.select-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 12px;
}

.label-icon {
  color: #6b7280;
  font-size: 14px;
}

.rule-select {
  width: 100%;

  :deep(.el-input__wrapper) {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

.rule-option {
  padding: 0;
}

.option-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.option-icon {
  font-size: 16px;
  color: #6b7280;
  flex-shrink: 0;
}

.option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.option-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.option-desc {
  font-size: 12px;
  color: #6b7280;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  background: white;
  border-top: 1px solid rgba(0, 82, 204, 0.1);
}

.cancel-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  border-radius: 8px;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.submit-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;

  .btn-icon {
    margin-right: 6px;
  }
}

/* 响应式设计 - H5兼容 */
@media (max-width: 768px) {
  .default-rule-dialog {
    :deep(.el-dialog) {
      width: 95% !important;
      margin: 20px auto;
    }
  }

  .dialog-content {
    padding: 16px;
  }

  .info-section,
  .select-section {
    padding: 16px;
  }

  .info-header {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .option-content {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .dialog-footer {
    flex-direction: column;
    gap: 8px;
  }

  .cancel-btn,
  .submit-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .default-rule-dialog {
    :deep(.el-dialog) {
      width: 100% !important;
      margin: 0;
      border-radius: 0;
      height: 100vh;
    }
  }

  .dialog-content {
    padding: 12px;
  }

  .info-section,
  .select-section {
    padding: 12px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .dialog-content {
    background: #1f2937;
  }

  .info-section,
  .select-section {
    background: #374151;
  }

  .info-title {
    color: #f9fafb;
  }

  .info-desc {
    color: #d1d5db;
  }

  .select-label {
    color: #e5e7eb;
  }

  .option-label {
    color: #e5e7eb;
  }

  .option-desc {
    color: #d1d5db;
  }
}
</style>
